<template>
  <view class="container">

	<view style="margin-bottom: 10px;">
		<text><text style="color: red;">*</text>商户编号</text>
	</view>
	
	<u-input v-model="form.traderNumber" placeholder="请输入商户编号" style="margin-bottom: 10px;"></u-input>
	
	
	
	<view style="margin-bottom: 10px;">
		<text><text style="color: red;"></text>商户手机号</text>
	</view>
	<u-input v-model="form.traderPhonenumber" placeholder="请输入商户手机号" style="margin-bottom: 10px;"></u-input>
	
	
	
	<view style="margin-bottom: 10px;">
		<text><text style="color: red;"></text>商户名称</text>
	</view>
	<u-input v-model="form.traderName" placeholder="请输入商户名称(默认和编码相同)" style="margin-bottom: 10px;"></u-input>
	
	
	
	
		  
    <!-- 原始二维码图片 -->
		<text style="margin-top: 200px;"><text style="color: red;">*</text>原始二维码图片</text>
		<view class="upload-container">
		
		<u-upload :fileList="fileList1" 
		@afterRead="afterRead" 
		@delete="deletePic" 
		name="1" 
		:multiple="false" 
		:maxCount="1"
		 width="200rpx" 
		 height="200rpx" 
		 :deletable="true"
		  :previewFullImage="true">
				    <!-- 这张图片就是自定义的图片，地址填写自己本地的就行 -->
		</u-upload>
		
        </view>


 



    <!-- 操作按钮 -->
    <view class="button-container">
      <u-button type="primary" @click="submit">提交</u-button>
      <!-- <u-button @click="goBack">返回</u-button> -->
    </view>
	<u-loading-icon text="上传中"  :show="showLoading" style="margin-top: 40%;" textSize="18"></u-loading-icon>
  </view>
</template>

<script>
import { getToken,setToken,TokenKey } from '@/utils/auth'
import {addOriginalQRcode} from '@/api/system/originalQRcode.js'	
export default {
	
	inject: ['baseUrl'],
	created() {
	    console.log(this.baseUrl); // 输出: http://123.56.162.123:10000
	  },
  data() {
    return {
		user: this.$store.state.user,	
		showLoading: false,

      // 表单参数
		form: {
			// 商户编码
			traderNumber: null,
			// 源码
			originalQrCode: null,
			// 商户手机号
			traderPhonenumber: null,
			// 商户名字
			traderName: null,
			// username: null,
			
			},
	fileList1: [],
    };
  },
  methods: {
	  //删除图片
	  			deletePic(e) {
	  				console.log(e);
	  				this[`fileList${e.name}`].splice(e.index, 1)
	  			},
	  			// 新增图片
	  			// afterRead 方法
	  			async afterRead(event) {
	  			  
	  			  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	  			  let lists = [].concat(event.file)
	  			  let fileListLen = this[`fileList${event.name}`].length
	  			  lists.map((item) => {
	  			    this[`fileList${event.name}`].push({
	  			      ...item,
	  			      status: 'uploading',
	  			      message: '上传中'
	  			    })
	  			  })
	  			  for (let i = 0; i < lists.length; i++) {
	  			    try {
	  			      const result = await this.uploadFilePromise(lists[i].url)
					  this.originalQrCode = result;
	  			      let item = this[`fileList${event.name}`][fileListLen]
	  			      this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
	  			        status: 'success',
	  			        message: '',
	  			        url: result
	  			      }))
	  			      fileListLen++
	  			    } catch (error) {
	  			      let item = this[`fileList${event.name}`][fileListLen]
	  			      this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
	  			        status: 'failed',
	  			        message: '上传失败'
	  			      }))
	  			      fileListLen++
	  			    }
	  			  }
	  			},

	  			//上传图片
	  			// uploadFilePromise 方法
	  			uploadFilePromise(filePath) {
					console.log("文件路径"+filePath)
	  			  // 调用上传接口，上传文件
	  			  const config = {
	  			    url: '/common/upload', // 上传接口路径
	  			    filePath: filePath, // 文件路径
	  			    header: this.headers, // 请求头
	  			    formData: {
	  			      user: 'test' // 其他表单数据
	  			    }
	  			  }
	  			  return this.$upload(config).then(response => {
	  			    console.log('上传成功', response)
	  			    return response.fileName // 返回上传后的文件URL
	  			  }).catch(error => {
	  			    console.error('上传失败', error)
	  			    throw error
	  			  })
	  			},


    handleUploadSuccess(type, res) {
      // 根据需要处理上传成功的逻辑 http://127.0.0.1:8080/common/upload
      console.log(type, res);
    },
    submit() {
      // 提交表单数据
	  
	  
	  
	 
	  this.form.originalQrCode = this.originalQrCode;
	   if(this.form.traderNumber=="" || this.form.traderNumber==undefined){
		uni.showToast({
	      title: '商户编号不能为空',
	      icon: 'none'
	    });
		return false;		   
	   }
	   if(this.form.originalQrCode=="" || this.form.originalQrCode==undefined){
	   		uni.showToast({
	      title: '请选择图片',
	      icon: 'none'
	    });
	   		return false;		   
	   }
	  if (!isNaN(this.form.traderNumber)) {
	    console.log('this.form.traderNumber 是数字');
		
	  } else {
	    uni.showToast({
	      title: '商户编号输入错误',
	      icon: 'none'
	    });
		return false;
	  }

	  console.log(this.form);
	  this.showLoading =true;
	  addOriginalQRcode(this.form).then(response => {
	  this.showLoading =false;	  

	                uni.showToast({
	                  title: '新增成功',
	                  icon: 'success'
	                });
					
					this.reset();
	                setTimeout(() => {
	                  uni.navigateTo({
	                    url: '/pages/home/admin/originalQR/OriginalQRManager',
	                  });
	                }, 1000); 
	              }).catch(error => {
						this.showLoading = false
						
					})
   
    },
    goBack() {
      // 返回操作
      console.log('返回');
    },
	    reset() {
	      this.form = {
	      
	      
	        originalQrCode: null,
	        traderNumber: null
	      };
	      
	    },
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.upload-container {
  margin-top: 10px; /* 控制上传组件与标签的间距 */
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
